<template>
  <div class="article-page-right">
    <div class="bar">
      <div class="item reference" title="Reference" @click="openReference">
        <svg>
          <use href="#icon-reference" />
        </svg>
      </div>
      <div class="line"></div>
      <div class="item select" title="Reference">
        <svg>
          <use href="#icon-select" />
        </svg>
      </div>
    </div>
    <transition name="pan">
      <div v-if="showReference" class="references">
        <div class="top">
          <head-t class="head" content="Reference"></head-t>
          <svg @click="closeReference">
            <use href="#icon-close" />
          </svg>
        </div>
        <div class="content">
          <div class="reference-item" v-for="(item, index) in references" :key="item.reference">
            <span class="serial">{{index}}.</span>
            <a class="reference-item-name" :href="item.ref_url">
              {{item.reference}}
            </a>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import '@/assets/icons/reference.svg';
import '@/assets/icons/select.svg';
import '@/assets/icons/close.svg';

import HeadT from '@/components/HeadTemp';

export default {
  name: "ArticlePageRight",
  props: {
    msg: {
      references: Array
    }
  },
  data() {
    return {
      showReference: false
    };
  },
  computed: {
    references() {
      console.log(this.msg);
      return this.msg?.references;
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    openReference() {
      this.showReference = !this.showReference;
    },
    closeReference() {
      this.showReference = false;
    }
  },
  components: {
    HeadT
  },
};
</script>

<style scoped lang="scss">

* {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: hsla(220, 4%, 58%, 0.3);
    transition: background-color 0.3s;

    &:hover {
      background: #bbb;
    }
  }

  &::-webkit-scrollbar-track {
    background: #ededed;
  }
}


.article-page-right {
  position: fixed;
  display: flex;

  .bar {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(187, 187, 187); 
    border-radius: 6px; 
    .item {
      font-size: 24px;
      padding: 4px;
      padding-bottom: 0;
      cursor: pointer;

      :hover {
        background: rgba(128, 255, 0, 0.4);
      }
    }
  }

  .references {
    // border: 1px solid goldenrod;
    padding-top: 44px;
    padding: 44px 16px 10px 16px;
    // border-radius: 10px;
    top: 125px;
    right: 0;
    width: 300px;

    height: calc(100% - 185px);
    overflow: auto;
    position: fixed;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background: rgba(128, 128, 128, 0.329);
    
    .top {
      margin-bottom: 10px;
      display: flex;
      position: fixed;
      background: rgba(214, 214, 214, 0.589);
      z-index: 999;
      padding-top: 10px;
      top: 125px;
      width: 292px;
      align-items: center;
      justify-content: space-between;
      opacity: 0;

      animation: .5s linear .5s forwards slidein;

      @keyframes slidein {
        from { opacity: 0; }
        to   { opacity: 1; }
      } 
      
      svg {
        font-size: 24px;
        cursor: pointer;
      }
    }



    .reference-item {
      background: #ffffff;
      border-radius: 10px;
      margin-bottom: 11px;
      padding: 10px 5px;
      position: relative;

      .serial {
        font-weight: 600;
      }

      .reference-item-name {
        color: black;
      }

      &::after {
        position: absolute;
        left: -10px;
        bottom: -5px;
        width: 300px;
        content: '';
        border-bottom: dotted 1px black;
      }
    }
  }


}
</style>
